<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>

    <style media="screen">
      /* 简单进行默认样式重置 */
      * {margin: 0;padding: 0}
      li {list-style: none;}
      a {text-decoration: none;}
      img {vertical-align: middle;}
    </style>

  </head>
  <body>
    <div id="app">
      <router-view></router-view>  <!-- 这里是展示来自路由页面数据的 -->
    </div>
    <!-- built files will be auto injected -->
  </body>

  <script type="text/javascript">
    /* 因为我们后面用的是rem布局，所以这里做下处理，根据不用设备分辨率更改跟字体大小。 rem相关布局[请参考](http://www.jianshu.com/p/65f80d4b44bb)*/
    (function(win,doc){
      change();
      function change(){
        doc.documentElement.style.fontSize = doc.documentElement.clientWidth *20/320+'px';
      }
      win.addEventListener('resize',change,false);
      win.addEventListener('orientationchange',change,false);  /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
    })(window,document);
  </script>

</html>
